<style lang="scss" scoped>
@import '../../styles/common/loading.less';
.container{
    border: none !important;
    margin-top: 4px;
}
.el-col-offset-1 {
    margin-left: 0%;
}
.button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

}
.col_a {
    margin-left: 2%;
}
.el-card {
    height: 200px;
}

.el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
}
</style>
<template>
    <div    class="common-background-color"
            v-loading="loading"
            element-loading-text="loading......"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:85%;margin: 36px 12px;margin-right: 50px;">
            <el-collapse v-model="activeNames"  >
                <el-collapse-item title="基础信息"  name="1">
                    <el-form :model="prpLPayee"  class="info-submit-form">
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="业务单号">
                                    <el-input v-model="prpLPayee.businessNo"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="赔付类型">
                                    <el-input v-model="prpLPayee.paymentTypeName"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="支付金额">
                                    <el-input v-model="prpLPayee.payAmount"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex">
                            <el-col :span="8" >
                                <el-form-item label="退票原因">
                                    <el-input v-model="prpLPayee.refundReason"  disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse  v-model="activeNames"  >
                <el-collapse-item title="账号信息"  name="2">
                    <el-form :model="prpLPayee"  class="info-submit-form">
                        <!--                        第1行-->
                        <el-row type="flex">
                            <el-col :span="8">
                            <el-form-item label="领款人姓名"  >
                                <el-input  v-model="prpLPayee.payeeName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                            <el-form-item label="支付对象"  >
                                <el-input v-model="prpLPayee.payObjectName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="联系电话"  >
                                    <el-input v-model="prpLPayee.phone"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第2行-->
                        <el-row type="flex">
                            <el-col :span="8"  >
                            <el-form-item label="证件类型"  >
                                <el-input v-model="prpLPayee.identifyTypeName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                            <el-form-item label="证件号码"  >
                                <el-input v-model="prpLPayee.identifyNo"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                            <el-form-item label="收款银行大类"  >
                                <el-input v-model="prpLPayee.bankBroad"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第3行-->
                        <el-row type="flex">
                            <el-col :span="8" >
                            <el-form-item label="开户行省"  >
                                <el-input v-model="prpLPayee.bankProvinceName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8"  >
                            <el-form-item label="开户行市"  >
                                <el-input v-model="prpLPayee.bankCityName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                            <el-form-item label="开户行区/县"  >
                                <el-input v-model="prpLPayee.bankDistrictName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>  
                        <!--                        第4行-->
                        <el-row type="flex">
                            <el-col :span="8">
                            <el-form-item label="开户银行"  >
                                <el-input v-model="prpLPayee.bankName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                            <el-form-item label="对公对私"  >
                                <el-input v-model="prpLPayee.bankToPubPriName"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                            <el-form-item label="账号"  >
                                <el-input v-model="prpLPayee.bankNo"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                        </el-row>
                        <!--                        第5行-->
                        <el-row type="flex">
                            <el-col :span="8"  >
                            <el-form-item label="银行地址"  >
                                <el-input v-model="prpLPayee.bankAddress"   disabled></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="赔款金额"  >
                                    <el-input v-model="prpLPayee.payAmount"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" >
                                <el-form-item label="赔款摘要"  >
                                    <el-input v-model="prpLPayee.remark"   disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>  
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse  v-model="activeNames"  >
                <el-collapse-item title="审核意见"  name="3">
                    <!-- <div style="margin-top: 20px;width: 99%">
                        <span style="margin-left: 1%;">审核意见：</span>
                        <template>
                            <el-radio :disabled="canEdit" v-model="auditOpinion" label="03">同意</el-radio>
                            <el-radio :disabled="canEdit" v-model="auditOpinion" label="04">退回</el-radio>
                        </template>
                        <br>
                        <br>
                        <div>
                            <el-input :disabled="canEdit" placeholder="" v-model="remark">
                            <template slot="prepend">审核备注</template>
                            </el-input>
                        </div>
                    </div> -->
                    
                    <el-form :model="prpLClaimOpinionDTO"  class="info-submit-form">
                        <el-row type="flex" class="input-textarea">
                            <el-col :span="8">
                                <el-form-item label="审核意见：" prop="auditOpinion">
                                    <el-radio :disabled="canEdit" v-model="prpLClaimOpinionDTO.auditOpinion" label="03">同意</el-radio>
                                    <el-radio :disabled="canEdit" v-model="prpLClaimOpinionDTO.auditOpinion" label="04">退回</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type="flex" class="input-textarea">
                            <el-col :span="24">
                                <el-form-item label="审核备注：" prop="remark">
                                    <el-input :disabled="canEdit" show-word-limit v-model="prpLClaimOpinionDTO.remark" type="textarea" ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-collapse-item>
            </el-collapse>
            <el-collapse v-model="activeNames">
                <el-collapse-item title="退票历史轨迹" name="4">
                  <div style="background-color:#FFF;">
                    <el-table
                      :data="prpLClaimOpinionRecordDTOList"
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                    >
                      <el-table-column prop="handlerCode" label="审核人工号" align="center"></el-table-column>
                      <el-table-column prop="handlerName" label="审核人姓名" align="center"></el-table-column>
                      <el-table-column prop="auditOpinion" :formatter="formatTaskState" label="审核状态" align="center"></el-table-column>
                      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                      <!-- <el-table-column prop="evaluate" label="评价" align="center"></el-table-column> -->
                      <el-table-column prop="handlTime" label="审核时间" align="center"></el-table-column>
                    </el-table>
                  </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- <div style="margin: 40px;padding-bottom: 50px;margin-left: 35%;">
            <el-button type="primary" v-if="(this.taskState==='01')" size="medium">放弃任务</el-button>
            <el-button :disabled="canEdit" type="success" v-if="this.taskState==='01'" size="medium" @click="onSubmit" style=" background-color:rgba(255, 138, 0, 1);
            border-color:rgba(255, 138, 0, 1);">提交</el-button>
            <el-button type="info" size="medium" @click="handleClose" style=" background-color:rgba(255, 138, 0, 1);
            border-color:rgba(255, 138, 0, 1);">关闭</el-button>
        </div> -->
        <div style="margin-top: 25px;text-align: center;height: 70px">
            <el-button type="primary" size="medium" style="width: 9%" v-if="this.taskState==='01'">放弃任务</el-button>
            <el-button type="primary" size="medium" style="width: 9%" v-if="this.taskState==='01'" @click="onSubmit">提交</el-button>
            <el-button type="primary" size="medium" style="width: 9%" @click="handleClose">关闭</el-button>
        </div>
    </div>
</template>
<script>
import{queryRefundTicketDetail,auditRefundTicket}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'refundTicketAuditCache',
    data() {
        return {
            loading: false,
            activeNames: ['1','2','3','4'],
            canEdit: false,
            prpLPayee:{},
            prpLClaimOpinionDTO:{
                auditOpinion:'',
                remark:'',
                evaluate:'',
            },
            prpLClaimOpinionRecordDTOList:[],
            data:{},
            id:'',
            taskState:''
        };
    },
    activated(){
        if(this.$route.params.taskId!=undefined){
            this.queryRefundTicketAuditDetail();
        }
    },
    created() {
        this.queryRefundTicketAuditDetail();
    },
    methods: {
        queryRefundTicketAuditDetail(){
            let taskId  = this.$route.params.taskId;
            this.taskState = this.$route.params.taskState
            this.canEdit = false;
            if(this.taskState == '03' || this.taskState =='04' || this.taskState == '05'){
                this.canEdit = true;
            }
            const param = {
                id: taskId
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryRefundTicketDetail(param)
                .then((res)=> {
                    this.loading = false;
                    if(res){
                        if(res.data.resultCode){
                            if(res.data.resultCode != '0000'){ 
                                // 返回失败
                                this.$message.error(res.data.resultMsg);
                            }else{
                                this.prpLPayee = res.data;
                                this.prpLClaimOpinionDTO = res.data.prpLClaimOpinionDTO;
                                this.prpLClaimOpinionRecordDTOList = res.data.prpLClaimOpinionRecordDTOList;
                                if(res.data.bankToPubPri){
                                    if(res.data.bankToPubPri == '1'){
                                        this.prpLPayee.bankToPubPriName = '对公';
                                    }else{
                                        this.prpLPayee.bankToPubPriName = '对私';
                                    } 
                                }
                            }
                        }else{
                            this.$message.error('系统异常'); 
                        }
                    }else{
                        this.$message.error('系统异常'); 
                    }

            })
        },
        onSubmit() {
            this.data = this.prpLPayee;
            this.data.prpLClaimOpinionDTO = this.prpLClaimOpinionDTO;
            this.data.prpLClaimOpinionDTO.taskType = "refund_ticket";
            this.data.taskState = this.prpLClaimOpinionDTO.auditOpinion;
            if(this.prpLClaimOpinionDTO.auditOpinion == undefined || this.prpLClaimOpinionDTO.auditOpinion == null || this.prpLClaimOpinionDTO.auditOpinion == ''){
                this.$message.warning('审核意见不能为空！');
                return;
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            auditRefundTicket(this.data)
                    .then(res => {
                        this.loading = false;
                        if(res){
                        if(res.data.resultCode){
                            if(res.data.resultCode != '0000'){ 
                                // 返回失败
                                this.$message.error(res.data.resultMsg);
                            }else{
                                this.$message.success(res.data.resultMsg);
                                this.closePageTo(this.$store,this.$route,this.$router,'refundTicketAudit');
                            }
                        }else{
                            this.$message.error('系统异常'); 
                        }
                        }else{
                        this.$message.error('系统异常'); 
                        }
                    })   
        },
        handleClose(){
            this.closePageTo(this.$store,this.$route,this.$router,'refundTicketAudit');
        }
    },

};
</script>